<!--
 * @页面名称:部门管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card departMangage">
    <splitpanes :dbl-click-splitter="false" style="background-color: #fff; display: flex; height: 100%">
      <pane size="15">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onClick"></ztree>
      </pane>
      <pane size="85">
        <el-space style="margin-left: 5px">
          <el-button :disabled="BtnStatus[0]" type="primary" @click="add">新增</el-button>
          <el-button :disabled="BtnStatus[1]" @click="edit">修改</el-button>
          <el-button :disabled="BtnStatus[2]" type="danger" @click="del">删除</el-button>
          <el-input v-model="searchVal" placeholder="输入搜索条件" />
          <el-button type="primary" @click="search">搜索</el-button>
        </el-space>
        <div style="height: calc(100% - 40px); margin-left: 5px; margin-top: 5px">
          <tree-table
            :columns="tableSetting.columns"
            :data="tableSetting.data"
            :treeConfig="{ transform: true, childId: 'Dept_ID', parentId: 'Dept_Father' }"
            @rowClick="rowClick"
          ></tree-table>
        </div>
      </pane>
    </splitpanes>
    <!-- 新增修改弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="dept_Order">
          <el-input v-model="formData.dept_Order"></el-input>
        </el-form-item>
        <el-form-item label="部门名称1:" prop="dept_Name">
          <el-input v-model="formData.dept_Name"></el-input>
        </el-form-item>
        <el-form-item label="部门名称2:" prop="dept_Name2">
          <el-input v-model="formData.dept_Name2"></el-input>
        </el-form-item>
        <el-form-item label="部门名称3:" prop="dept_Name3">
          <el-input v-model="formData.dept_Name3"></el-input>
        </el-form-item>
        <el-form-item label="部门代号1:" prop="dept_Code">
          <el-input v-model="formData.dept_Code"></el-input>
        </el-form-item>
        <el-form-item label="部门代号2:" prop="dept_Code2">
          <el-input v-model="formData.dept_Code2"></el-input>
        </el-form-item>
        <el-form-item label="部门代号3:" prop="dept_Code3">
          <el-input v-model="formData.dept_Code3"></el-input>
        </el-form-item>
        <el-form-item label="父级:" prop="dept_Father">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData.dept_Father"
            node-key="Dept_ID"
            :props="{ label: 'Dept_Name', children: 'children' }"
            :data="parentData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="是否启用:" prop="dept_Enable">
          <el-checkbox v-model="formData.dept_Enable"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注:" prop="dept_Remark">
          <el-input v-model="formData.dept_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx" name="departmentManage">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import Ztree from "@/components/ztree/Ztree.vue";
import TreeTable from "@/components/TreeTable/TreeTable.vue";
import { transTree } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

const { proxy } = useCurrentInstance();
// 按钮状态
const BtnStatus = ref([true, true, true]);
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [],
  treeNode: {} as any
});
// table配置
const tableSetting = reactive({
  columns: [
    { field: "Dept_Order", title: "顺序号", sortable: true, treeNode: true },
    { field: "Dept_Name", title: "部门名称", sortable: true },
    { field: "Dept_Name2", title: "部门名称2", sortable: true },
    { field: "Dept_Name3", title: "部门名称3", sortable: true },
    { field: "Dept_Code", title: "部门代号", sortable: true },
    { field: "Dept_Code2", title: "部门代号2", sortable: true },
    { field: "Dept_Code3", title: "部门代号3", sortable: true },
    {
      field: "Dept_Enable",
      title: "启用",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [
            <div>
              <el-checkbox disabled v-model={row.Dept_Enable} />
            </div>
          ];
        }
      }
    },
    { field: "Dept_Remark", title: "备注", sortable: true }
  ],
  data: [] as any
});
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 表单配置
const formData = reactive({
  dept_Code: "",
  dept_Code2: "",
  dept_Code3: "",
  dept_Name: "",
  dept_Name2: "",
  dept_Name3: "",
  dept_Enable: true,
  dept_Father: null as any,
  dept_Order: 1,
  dept_Remark: ""
});
// 弹出框表单父级数据
const parentData = ref<any[]>([]);
// 表单规则
const rules = reactive<FormRules>({});
// 表单实例
const formRef = ref<FormInstance>();
// 搜索条件
const searchVal = ref("");
// 单击保存数据
const clickObj = ref();
// 获取全宗树
const getFondsData = () => {
  proxy.$vueAxios.get("MasterBaseFonds/GetFondsTree").then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// 树节点点击事件
const onClick = (treeNode: any) => {
  BtnStatus.value[0] = false;
  treeSetting.treeNode = treeNode;
  getData();
};
// 获取表格数据
const getData = () => {
  proxy.$vueAxios
    .post("Master_Base_Dept/GetConditional", {
      order: "Dept_Order asc",
      dtoList: [{ fieldName: "Fonds_ID", fieldValue: treeSetting.treeNode.Fonds_ID, conditionalType: 0 }]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
      parentData.value = transTree(res.List, "Dept_ID", "Dept_Father");
    });
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  clickObj.value = row;
  BtnStatus.value[1] = false;
  BtnStatus.value[2] = false;
};
// 新增
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formRef.value?.resetFields();
};
// 修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  formData.dept_Order = clickObj.value.Dept_Order;
  formData.dept_Name = clickObj.value.Dept_Name;
  formData.dept_Name2 = clickObj.value.Dept_Name2;
  formData.dept_Name3 = clickObj.value.Dept_Name3;
  formData.dept_Code = clickObj.value.Dept_Code;
  formData.dept_Code2 = clickObj.value.Dept_Code2;
  formData.dept_Code3 = clickObj.value.Dept_Code3;
  formData.dept_Father = clickObj.value.Dept_Father;
  formData.dept_Enable = clickObj.value.Dept_Enable;
  formData.dept_Remark = clickObj.value.Dept_Remark;
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Dept/Delete", [clickObj.value.Dept_ID]).then((res: any) => {
        if (res.Mark) {
          getData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 搜索
const search = () => {
  proxy.$vueAxios
    .post("Master_Base_Dept/GetConditional", {
      order: "Dept_Order asc",
      dtoList: [{ fieldName: "Dept_Name", fieldValue: searchVal.value, conditionalType: 1 }]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
    });
};
// 弹出框确认事件
const handle = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_Dept", {
            dept_ID: proxy.$global.createID(),
            fonds_ID: treeSetting.treeNode.Fonds_ID,
            dept_Father: formData.dept_Father,
            dept_Code: formData.dept_Code,
            dept_Code2: formData.dept_Code2,
            dept_Code3: formData.dept_Code3,
            dept_Name: formData.dept_Name,
            dept_Name2: formData.dept_Name2,
            dept_Name3: formData.dept_Name3,
            dept_Enable: formData.dept_Enable,
            dept_Order: formData.dept_Order,
            dept_Remark: formData.dept_Remark,
            dept_IsExpanded: true,
            dept_Level: 0,
            dept_DescOrderBy: true
          })
          .then(() => {
            dialogSetting.visible = false;
            getData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_Dept", {
            dept_ID: clickObj.value.Dept_ID,
            fonds_ID: clickObj.value.Fonds_ID,
            dept_Father: formData.dept_Father,
            dept_Code: formData.dept_Code,
            dept_Code2: formData.dept_Code2,
            dept_Code3: formData.dept_Code3,
            dept_Name: formData.dept_Name,
            dept_Name2: formData.dept_Name2,
            dept_Name3: formData.dept_Name3,
            dept_Enable: formData.dept_Enable,
            dept_Order: formData.dept_Order,
            dept_Remark: formData.dept_Remark,
            dept_IsExpanded: true,
            dept_Level: 0,
            dept_DescOrderBy: true
          })
          .then(() => {
            dialogSetting.visible = false;
            getData();
          });
      }
    }
  });
};
onMounted(() => {
  getFondsData();
});
</script>
<style scoped lang="scss">
.departMangage {
  height: 100%;
}
</style>
